<template>
  <div class="list">
    <header v-show="isShow">
      <div class="returns">
        <i class="iconfont icon-fanhui"></i>
      </div>
      <div class="search">
        <i  class="iconfont icon-fangdajing"></i>
        <span>搜你喜欢的...</span>
      </div>
      <div class="go-home">
        <img src="@/assets/images/home.png" alt="">
      </div>
    </header>
    <section>
      <!-- class="active" -->
      <div class="list-l" ref='left'>
        <ul class="l-item">
          <li  
          v-for="(item ,index ) in leftData" 
          :key="index"
          @click="goScroll(index)"
          :class="{active:index==currentIndex}">
          {{item.name}}
          </li>
        </ul>
      </div>
      <div class="list-r" ref="right">
        <div>
          <ul
         v-for="(item,index) in rightData" 
         :key="index">
          <li 
          class="shop-list"
          v-for="(k,i) in item " 
          :key="i">
            <h2>{{k.name}}</h2>
            <ul class="r-content">
              <li
              v-for="(j,idx) in k.list " :key="idx">
                <img :src="j.imgUrl" alt="">
                <span>{{j.name}}</span>
              </li>
            </ul>
          </li>
        </ul>
        </div>
        
      </div>
    </section>
     <TabbaR></TabbaR>
  </div>
</template>

<script>
import BetterScroll from 'better-scroll'
import http from '@/common/api/request.js'
import TabbaR from '@/components/common/TabbaR.vue'
export default {
  name: "LisT",
  data(){
    return{
      isShow:true,
      leftData:[],//左侧数据
      rightData:[],//右侧数据
      rightBScroll:'',//右侧滑动
      allHeight:[],//承载右侧每一块的高度值
      scrollY:'',//右侧滚动距离
    }
  },
  computed:{
    currentIndex(){
      return this.allHeight.findIndex((item,index)=>{
        return this.scrollY >= item && this.scrollY < this.allHeight[index+1]
      })
    }
  },
  components:{
    TabbaR
  },
  async created(){
    let res = await http.$axios({
      url:'/api/goods/list'
    })
    let leftArr = [];
    let rightArr = [];
    res.forEach(v => {
        leftArr.push({
          id:v.id,
          name:v.name
        })
        rightArr.push( v.data )
    });
    this.leftData = leftArr;
    this.rightData = rightArr;
      //当dom都加载完毕了再去执行
    this.$nextTick(() =>{
      //左侧滑动
	    new BetterScroll(this.$refs.left,{
        click:true,
        bounce:false
      });
      //右侧滑动
      this.rightBScroll = new BetterScroll(this.$refs.right,{
        click:true,
        probeType:3,
        bounce:false
      });
      //统计右侧所有板块的高度值  并且放入数组中
      let height = 0;
      this.allHeight.push(height);
      //获取右侧每一块高度
      let uls = this.$refs.right.getElementsByClassName('shop-list');
      //把对象转化为真实dom元素
      Array.from(uls).forEach(v => {
        height += v.clientHeight
        this.allHeight.push( height )
      });
      //右侧滚动的值
      this.rightBScroll.on('scroll',(pos)=>{
        this.scrollY = Math.abs(pos.y);
        if(Math.abs(pos.y)>=50){
          this.isShow = false;
        }else{
          this.isShow = true;
        }
      })
   })
  },
  methods:{
    goScroll( index ){
      this.rightBScroll.scrollTo(0,-this.allHeight[index],300)
    }
  }
};
</script>

<style scoped lang="scss">
.list{
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  
}
header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 1.17333rem;
  background-color: #b0352f;
  .returns{
    padding: 0 0.5333rem;
    line-height: 1.17333rem;
    i{
      color: #fff;
      font-size: 0.69333rem;
    }
  }
  .search{
    display: flex;
    align-items: center;
    flex: 1;
    padding: 0.16rem .0.2666rem;
    background-color: #fff;
    border-radius: 0.5rem;
    i{
      padding-right: 0.16rem;
      color: #666;
      font-size: 0.48rem;
      margin-left:10px ;
    }
    span{
      color: #666;
      font-size: 0.37333rem;
    }
  }
  .go-home{
    padding: 0 0.2666rem;
    line-height: 1.17333rem;
    img{
      width: 0.48rem;
      height: 0.48rem;
    }
  }
}

section{
  display: flex;
  flex:1;
  overflow: hidden;
}
.list-l{
  width: 2.48rem;
  background-clip: #fff;
  border-right: 1px solid rgb(255, 161, 161);
  overflow: hidden;
  .l-item{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    li{
      width: 100%;
      line-height: 1.333rem;
      text-align: center;
      font-size: 0.4rem;
      &.active{
        border-left:4px solid #b54f4a;
        color:#b54f4a;
      }
    }
  }
}
.list-r{
  flex: 1;
  overflow: hidden;
  .shop-list{
    text-align: center;
    h2{
      font-size: 0.64rem;
      font-weight: 400;
    }
    .r-content{
      display: flex;
      flex-wrap: wrap;
      li{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 0.26666rem 0;
        width: 33.3%;
        img{
          width: 1.41333rem;
          height: 1.41333rem;
        }
        span{
          font-size: 0.42666rem;
        }
      }
    }
  }
}
::v-deep.tabbar{
  border-top:1px solid #ccc
} 
</style>
